<template>
  <view :style="colorStyle">
    <navTitle :title="'我的推广'" />
    <view class="bg">
      <view class="block1"> </view>
      <image
        src="http://xpj40szpt.signalpha.cn/img/img22.png"
        mode="widthFix"
      ></image>
    </view>

    <view class="infobox1 flex aitems">
      <image :src="info.avatar" class="block1" mode="aspectFill"></image>
      <view class="block2">
        <view class="info flex aitems cfff">
          <view class="info1 f32">
            {{ info.nickName }}
          </view>
          <view class="info2 f20 themeColor">
            {{ level[info.level] }}
          </view>
        </view>
        <view class="ids cfff f24"> ID： {{ info.id }} </view>
      </view>
    </view>

    <view class="infobox2 flex aitems sa">
      <view class="block1" @click="gourl(`/pages/distributor/commission`)">
        <view class="info1 c1F1F1F f40 fontWeight">
          {{ total.orderAmount || 0 }}
        </view>
        <view class="info2 c525252 f28"> 佣金总数 </view>
      </view>
      <view class="block1" @click="gourl(`/pages/distributor/recommend`)">
        <view class="info1 c1F1F1F f40 fontWeight">
          {{ total.userNum || 0 }}
        </view>
        <view class="info2 c525252 f28"> 推广总人数 </view>
      </view>
      <view class="block1" @click="gourl(`/pages/distributor/recommendOrder`)">
        <view class="info1 c1F1F1F f40 fontWeight">
          {{ total.orderNum || 0 }}
        </view>
        <view class="info2 c525252 f28"> 推广总订单 </view>
      </view>
    </view>

    <view class="infobox3">
      <!-- <view
        class="block1 flex aitems between"
        @click="gourl(`/pages/distributor/addSeller`)"
      >
        <view class="info1 flex aitems">
          <image src="@/static/img23.png" mode=""></image>
          <view class="tip1 c1F1F1F f28"> 我加入的店铺 </view>
        </view>
        <image src="@/static/img18.png" mode="" class="block2"></image>
      </view> -->
      <view
        class="block1 flex aitems between"
        @click="gourl(`/pages/distributor/recommend`)"
      >
        <view class="info1 flex aitems">
          <image src="@/static/img24.png" mode=""></image>
          <view class="tip1 c1F1F1F f28"> 推广人统计 </view>
        </view>
        <image src="@/static/img18.png" mode="" class="block2"></image>
      </view>
      <view
        class="block1 flex aitems between"
        @click="gourl(`/pages/distributor/recommendOrder`)"
      >
        <view class="info1 flex aitems">
          <image src="@/static/img25.png" mode=""></image>
          <view class="tip1 c1F1F1F f28"> 推广人订单 </view>
        </view>
        <image src="@/static/img18.png" mode="" class="block2"></image>
      </view>
      <view
        class="block1 flex aitems between"
        @click="gourl(`/pages/distributor/rankings?id=${info.id}`)"
      >
        <view class="info1 flex aitems">
          <image src="@/static/img26.png" mode=""></image>
          <view class="tip1 c1F1F1F f28"> 推广人排行 </view>
        </view>
        <image src="@/static/img18.png" mode="" class="block2"></image>
      </view>
      <view
        class="block1 flex aitems between"
        @click="gourl(`/pages/distributor/commissionRankings?id=${info.id}`)"
      >
        <view class="info1 flex aitems">
          <image src="@/static/img27.png" mode=""></image>
          <view class="tip1 c1F1F1F f28"> 佣金排行 </view>
        </view>
        <image src="@/static/img18.png" mode="" class="block2"></image>
      </view>
      <view
        class="block1 flex aitems between"
        @click="gourl(`/pages/distributor/qrcode`)"
      >
        <view class="info1 flex aitems">
          <image src="@/static/img28.png" mode=""></image>
          <view class="tip1 c1F1F1F f28"> 推广名片 </view>
        </view>
        <image src="@/static/img18.png" mode="" class="block2"></image>
      </view>
      <view
        class="block1 flex aitems between"
        @click="gourl(`/pages/distributor/commission`)"
      >
        <view class="info1 flex aitems">
          <image src="@/static/img29.png" mode=""></image>
          <view class="tip1 c1F1F1F f28"> 佣金记录 </view>
        </view>
        <image src="@/static/img18.png" mode="" class="block2"></image>
      </view>
    </view>
  </view>
</template>

<script>
import { placeTotal, userinfo, levelList } from "@/servers/servers.js";
import { HTTP_STATUS } from "../../servers/config";
import {
  loading,
  go,
  requestSubscribeMessage,
  back,
  showModal,
} from "../../utils/wxAPI";
import colors from "@/mixins/color";
import { getToken } from "../../utils/storage";
export default {
  mixins: [colors],
  data() {
    return {
      total: {},
      info: {},
      level: {},
    };
  },
  async onLoad(options) {},
  async onShow() {
    if (getToken()) {
      await this.levelList();
      this.placeTotal();
      this.userinfo();
    }
  },
  methods: {
    async levelList() {
      loading();
      let { data } = await levelList();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data;
        let obj = {};
        for (let key of list) {
          obj[key.id] = key.name;
        }
        this.level = obj;
        console.log(this.level);
      }
      uni.hideLoading();
    },
    async userinfo() {
      loading();
      let { data } = await userinfo();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.info = info;
        if (this.info.placeStatus == 0) {
          showModal({
            t2: "该账户分销已被冻结,请联系客服",
            btn1show: false,
          }).then(() => {
            back();
          });
        }
      }
      uni.hideLoading();
    },
    async placeTotal() {
      let { data } = await placeTotal();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.total = info;
      }
      uni.stopPullDownRefresh();
    },
    gourl(url) {
      // #ifdef MP-WEIXIN
      loading();
      requestSubscribeMessage({
        tmplIds: [
          "0K40Jiv1m4F54ptWntVvqo8kTYG5U470u-X8tnEVJbA",
          "5DaJQwHPSQ3TXD5KT03RHjpzz_rvTY_j-73pBVSF7jg",
        ],
      }).then(async (res) => {
        uni.hideLoading();
        go(url);
      });
      // #endif
      // #ifdef H5
      go(url);
      // #endif
    },
  },
  onPullDownRefresh() {
    this.placeTotal();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.bg {
  width: 100%;
  height: 750rpx;
  background: linear-gradient(
    180deg,
    var(--view-theme) 74.53%,
    rgba(92, 206, 221, 0) 100%
  );
  position: absolute;
  top: 0;

  .block1 {
    background: linear-gradient(
      180deg,
      var(--view-theme) 0%,
      var(--view-theme) 100%
    );
  }

  image {
    width: 100%;
  }
}

.infobox1 {
  position: relative;
  z-index: 1;
  margin: 50rpx 30rpx 0;

  .block1 {
    width: 96rpx;
    height: 96rpx;
    border-radius: 96rpx;
  }

  .block2 {
    margin-left: 24rpx;
    width: calc(100% - 24rpx - 96rpx);

    .info {
      .info1 {
      }

      .info2 {
        margin-left: 16rpx;
        border-radius: 20rpx;
        background: #fff;
        padding: 4rpx 18rpx;
      }
    }

    .ids {
      margin-top: 8rpx;
    }
  }
}

.infobox2 {
  border-radius: 28rpx;
  background: #fff;
  margin: 30rpx 30rpx 0;
  padding: 36rpx 0;
  position: relative;
  z-index: 1;

  .block1 {
    width: 33.33%;
    text-align: center;

    .info1 {
    }

    .info2 {
      margin-top: 8rpx;
    }
  }
}

.infobox3 {
  border-radius: 28rpx;
  background: #fff;
  margin: 30rpx 30rpx 0;
  padding: 20rpx 24rpx;
  position: relative;
  z-index: 1;

  .block1 {
    padding: 20rpx 0;

    .info1 {
      image {
        width: 56rpx;
        height: 56rpx;
      }

      .tip1 {
        margin-left: 24rpx;
      }
    }
  }

  .block2 {
    width: 32rpx;
    height: 32rpx;
  }
}
</style>
